<template>
  <div class="wrap">
    <div class="d_left">
        图片
    </div>
    <div class="d_right">
      <div v-for="(item, i) in hotlist" :key="i">
        <img
          :src="'http://47.115.85.237:3000/' + item.product_picture"
          alt=""
          srcset=""
        />
        <p>{{ item.product_name }}</p>
        <p>{{ item.product_title }}</p>
        <p>
          <span style="color: orange;"><big><b>￥{{ item.product_selling_price }}</b></big></span> &emsp;
          <del style="color: #ccc;">￥{{ item.product_price }}</del>
        </p>
      </div>
      <div>
          <p style="line-height: 300px;">查看更多>></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      hotlist: [],
    };
  },
  mounted() {
    this.$axios
      .post("/api/product/getHotProduct", { categoryName: ["手机"] })
      .then((res) => {
        // console.log(res);
        this.hotlist = res.data.Product;
      });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
    .wrap{
        width: 1400px;
        height: 625px;
        margin: 0 auto;
        display: flex;
       margin-top: 10px;
        .d_left{
            width: 300px;
            height: 100%;
             background-color: #fff;
        }
        .d_right{
            width: 1100px;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            div{
                width: 260px;
                height: 49%;
                 background-color: #fff;
            }
        }
    }
</style>
